<template>
    <!-- Card is full width. Use in 4 col grid for best view. -->
    <!-- Card code block start -->
    <div class="bg-white shadow rounded mx-auto pb-4 lg:pb-8 w-full">
        <h2 class="p-4 lg:p-8 text-lg leding-4 font-bold text-color">
            Approved Payment Modes
        </h2>
        <div class="relative bg-gray-100 flex rounded mx-4 lg:mx-8 mb-4">
            <div
                    class="border-r border-gray-200 flex items-center justify-center"
            >
                <div class="w-20 h-20 px-4 py-5">
                    <img
                            class="w-full h-full overflow-hidden object-cover rounded"
                            src="../../assets/images/foxhub.png"
                            alt="master-card"
                    />
                </div>
            </div>
            <div class="flex pl-4 py-4 lg:py-3 justify-between w-full">
                <div class="flex flex-col h-full justify-center">
                    <h4
                            class="mb-2 lg:mb-1 text-sm leading-3 font-bold text-gray-800"
                    >
                        Ending with 4242
                    </h4>
                    <div
                            class="flex flex-col lg:flex-row items-start lg:items-center"
                    >
                        <p class="text-xs leading-5 font-normal text-gray-800">
                            Expires 06/21 -
                        </p>
                        <p class="text-xs leading-5 font-normal text-gray-800">
                            Last updated on 14 March 2020
                        </p>
                    </div>
                </div>
            </div>
            <div
                    class="w-5 h-5 absolute inset-0 m-auto mt-3 lg:mt-4 mr-2 lg:mr-4 text-gray-600 hover:text-indigo-600 cursor-pointer"
            >
                <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon icon-tabler icon-tabler-edit"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path
                            d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3"
                    />
                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
                    <line x1="16" y1="5" x2="19" y2="8" />
                </svg>
            </div>
        </div>
        <div class="relative bg-gray-100 flex rounded mx-4 lg:mx-8 mb-4">
            <div
                    class="border-r border-gray-200 flex items-center justify-center"
            >
                <div class="w-20 h-20 px-4 py-5">
                    <img
                            class="w-full h-full overflow-hidden object-cover rounded"
                            src="../../assets/images/u-mark.png"
                            alt="master-card"
                    />
                </div>
            </div>
            <div class="flex pl-4 py-4 lg:py-3 justify-between w-full">
                <div class="flex flex-col h-full justify-center">
                    <h4
                            class="mb-2 lg:mb-1 text-sm leading-3 font-bold text-gray-800"
                    >
                        Ending with 4242
                    </h4>
                    <div
                            class="flex flex-col lg:flex-row items-start lg:items-center"
                    >
                        <p class="text-xs leading-5 font-normal text-gray-800">
                            Expires 06/21 -
                        </p>
                        <p class="text-xs leading-5 font-normal text-gray-800">
                            Last updated on 14 March 2020
                        </p>
                    </div>
                </div>
            </div>
            <div
                    class="w-5 h-5 absolute inset-0 m-auto mt-3 lg:mt-4 mr-2 lg:mr-4 text-gray-600 hover:text-indigo-600 cursor-pointer"
            >
                <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon icon-tabler icon-tabler-edit"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path
                            d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3"
                    />
                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
                    <line x1="16" y1="5" x2="19" y2="8" />
                </svg>
            </div>
        </div>
        <div class="relative bg-gray-100 flex rounded mx-4 lg:mx-8">
            <div
                    class="border-r border-gray-200 flex items-center justify-center"
            >
                <div class="w-20 h-20 px-4 py-5">
                    <img
                            class="w-full h-full overflow-hidden object-cover rounded"
                            src="../../assets/images/muszica.png"
                            alt="master-card"
                    />
                </div>
            </div>
            <div class="flex pl-4 py-4 lg:py-3 justify-between w-full">
                <div class="flex flex-col h-full justify-center">
                    <h4
                            class="mb-2 lg:mb-1 text-sm leading-3 font-bold text-gray-800"
                    >
                        Ending with 4242
                    </h4>
                    <div
                            class="flex flex-col lg:flex-row items-start lg:items-center"
                    >
                        <p class="text-xs leading-5 font-normal text-gray-800">
                            Expires 06/21 -
                        </p>
                        <p class="text-xs leading-5 font-normal text-gray-800">
                            Last updated on 14 March 2020
                        </p>
                    </div>
                </div>
            </div>
            <div
                    class="w-5 h-5 absolute inset-0 m-auto mt-3 lg:mt-4 mr-2 lg:mr-4 text-gray-600 hover:text-indigo-600 cursor-pointer"
            >
                <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon icon-tabler icon-tabler-edit"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path
                            d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3"
                    />
                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
                    <line x1="16" y1="5" x2="19" y2="8" />
                </svg>
            </div>
        </div>
    </div>
    <!-- Card code block end -->
</template>

<script>
    export default {
        name: "dash-modes"
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    body {
        font-family: "Lato", sans-serif;
    }
    /* shows controls on hover */
    .controls {
        opacity: 0;
    }
    .trigger:hover .controls {
        opacity: 1;
    }
    .trigger:hover .overlay {
        --bg-opacity: 0.75;
    }
    /* Checkbox */
    .checkbox:checked {
        /* Apply class right-0*/
        right: 0;
    }
    .checkbox:checked + .toggle-label {
        /* Apply class bg-indigo-700 */
        background-color: #4299e1;
    }

    .divcolor {
        background-color: #4299e1;
    }
    .buttoncolor {
        background-color: #667eea;
    }
    .text-color {
        color: #4a5568;
    }
    .height {
        height: 0.313rem;
    }
</style>
